 <template>
	<view>
		
		<!--主体-->
		<view class="meMain uni-bold">
			<view class="imageback"></view>
			<view class="mePosition">
				<view class="meMainBox">
					
					<!--头部-->
					<view class="meHead">
						<view class="meHeadAvatar"><image :src="avatar_url" mode="aspectFill"></image></view>
						<view class="meHeadName" @click.stop="changeName"><text>{{ name }}</text></view>
					</view>
					<!--头部-->
					
					
					<view class="meOverBg uni-bold">
						<!-- <view class="meVisitorTitle">项目</view> -->
						<view class="meVisitor">
							<!-- <view class="meOrderLt" @click="gotoMyPublic">
								<view class="meOrderTxt_01">{{public_repos}}</view>
								<view class="meOrderTxt_02">Public</view>
							</view> -->
							<view class="meOrderLt" @click="gotoMyStar">
								<view class="meOrderTxt_01">{{stared}}</view>
								<view class="meOrderTxt_02">Stars</view>
							</view>
							<view class="meOrderLt" @click="gotoMyWatch">
								<view class="meOrderTxt_01">{{watched}}</view>
								<view class="meOrderTxt_02">Watches</view>
							</view>
							<!-- 接口不全 -->
							<!-- <view class="meOrderLt" @click="gotoMyGists">
								<view class="meOrderTxt_01"><image src="../../static/section_active.png"></image></view>
								<view class="meOrderTxt_02">{{public_gists}}</view>
							</view> -->
							
						</view>
					</view>
					
					<view class="meOverBg uni-bold" @click="changeBio()">
						<view class="description"><text>简介 : {{bio ? bio : '暂无简介'}}</text></view>
					</view>
					<view class="meOverBg uni-bold">
						<view class="description"><text>加入时间 : {{timeToString(created_at)}}</text></view>
					</view>
				
					<!--其他-->
					<view class="meOverBg">
						<view class="businessList" @click="gotoMyRepos" v-if="login">
							<view class="businessListTxt"><image src="../../static/project_active.png"></image>我的仓库</view>
							<view class="businessListYou"><image src="../../static/you.png"></image></view>
						</view>
						<view class="businessList" v-if="weibo && login">
							<view class="businessListTxt"><image src="../../static/weibo_active.png"></image>我的微博</view>
							<view class="businessListYou"><a :href="weibo">{{this.name}}</a><image src="../../static/you.png"></image></view>
						</view>
						<!-- <view class="businessList">
							<view class="businessListTxt"><image src="../../static/meIcon_01.png"></image>关注我的</view>
							<view class="businessListYou">{{followers}}<image src="../../static/you.png"></image></view>
						</view> -->
					</view>
					
					<!--其他-->
					<view class="meOverBg">
						<view class="businessList" @click="gotoEvents" v-if="login">
							<view class="businessListTxt"><image src="../../static/dongtai_active.png"></image>公开动态</view>
							<view class="businessListYou"><image src="../../static/you.png"></image></view>
						</view>
						<view class="businessList" @click="changeWeibo" v-if="login">
							<view class="businessListTxt"><image src="../../static/weibo_active.png"></image>我的微博</view>
							<view class="businessListYou">{{weibo ? '查看' : '无'}}<image src="../../static/you.png"></image></view>
						</view>
						<view class="businessList" @click="changeBlog" v-if="login">
							<view class="businessListTxt"><image src="../../static/blog_active.png"></image>我的博客</view>
							<view class="businessListYou">{{blog ? '查看' : '无'}}<image src="../../static/you.png"></image></view>
						</view>
						<view class="businessList" @click="gotoFeedback" v-if="login">
							<view class="businessListTxt"><image src="../../static/fankui_active.png"></image>意见反馈</view>
							<view class="businessListYou"><image src="../../static/you.png"></image></view>
						</view>
						<view class="businessList" @click="gotoAbout">
							<view class="businessListTxt"><image src="../../static/about_active.png"></image>关于</view>
							<view class="businessListYou"><image src="../../static/you.png"></image></view>
						</view>
					</view>
					<!--其他-->
					<button v-if="login" @click="logout" type="primary" style="margin-top: 30rpx;margin-bottom:160rpx;background-color: #50B7EA;">退出登陆</button>
				</view>
			</view>
		</view>
		<!--主体-->
		<Prompt ref="prompt" :title="promptTitle" :defaultValue="promptDefault" :inputType="type" @onConfirm="onPromptSure" :isLogin="isLogin"></Prompt>
	</view>
</template>

<script>
	import {myinfo,changeName,changeBio,changeBlog,changeWeibo} from '../../utils/api/user.js'
	import Prompt from '../../components/yomol-prompt/yomol-prompt.vue'
	export default{
		components: {Prompt},
		data(){
			return{
				avatarUrl:'../../static/avatar.png',//头像
				nickName:'点击登录',
				token:'',
				loginState:'',
				
				avatar_url : '../../static/avatar.png',
				followers : 0,
				following : 0,
				name : '点击登录',
				login : false,
				public_repos : 0,
				public_gists : 0,
				stared : 0,
				watched : 0,
				created_at : '',
				isLogin:false,
				blog : "",
				bio : '',
				weibo : '',
				
				promptTitle:"",
				promptDefault : "",
				type : "",
				login_name: ""
				
			}
		},
		onLoad() {
			
			this.getData()
			
		},
		onShow() {			
			this.token = uni.getStorageSync('token');			
		},
		onTabItemTap() {
			this.$refs.prompt.hide()
		},
		methods:{
			getData(){
				uni.showLoading({
					
				})
				myinfo().then(res => {
					uni.hideLoading()
					let data = res.data
					this.login = true
					this.avatar_url = data.avatar_url
					this.name = data.name
					this.followers = data.followers
					this.following = data.following
					this.stared = data.stared
					this.watched = data.watched
					this.public_gists = data.public_gists
					this.public_repos = data.public_repos				
					this.created_at = data.created_at
					this.bio = data.bio
					this.weibo = data.weibo
					this.login_name = data.username
					uni.setStorageSync('login',data.username)
				})
			},
			timeToString(utc){
				if(!utc){
					return '00'
				}
				if(!isNaN(utc)){
					return utc >= 10 ? utc : '0' + utc
				}
				let d = new Date(utc);
				let datetime=d.getFullYear() 
				+ '-' 
				+ this.timeToString(d.getMonth() + 1)
				+ '-' 
				+ this.timeToString(d.getDate())
				+ ' ' 
				+ this.timeToString(d.getHours())
				+ ':' 
				+ this.timeToString(d.getMinutes())
				+ ':' 
				+ this.timeToString(d.getSeconds());
				return datetime
			},
			gotoMyStar(){
				uni.navigateTo({
					url:"./myStarRepo"
				})
			},
			// gotoMyGists(){
			// 	uni.navigateTo({
			// 		url:"../commom/commomProjects/commomProjects?name=我的gists&url=v5/gists/starred"
			// 	})
			// },
			gotoEvents(){
				uni.navigateTo({
					url:"../common/events?name="+this.name + "&login="+this.login_name
				})
			},
			changeBlog(){
				this.promptTitle = "修改博客"
				this.promptDefault = this.blog ? this.blog : "http://"
				this.$refs.prompt.show()
			},
			changeWeibo(){
				this.promptTitle = "修改微博"
				this.promptDefault = this.weibo ? this.weibo : "https://weibo.com/"
				this.$refs.prompt.show()
			},
			changeName(){
				if(!this.login){
					uni.navigateTo({
						url:"../index/login/login"
					})
				}
			},
			onPromptSure(data){
				uni.showLoading({})
				if (this.promptTitle == "请输入您的登陆信息"){
					if(data){
						uni.request({
							url:"https://gitee.com/api/v3/session",
							method : "POST",
							data : data,
							success: (res) => {
								if(res.statusCode == 401){
									uni.showToast({
										icon:"none",
										title:"用户名或密码错误"
									})
								}else if(res.statusCode == 304 || res.statusCode == 200 || res.statusCode == 201){
									uni.setStorageSync('private_token',res.data.private_token)
									uni.setStorageSync('user_id',res.data.id)
									uni.setStorageSync('username',res.data.username)
									this.$refs.prompt.hide()
									this.getData()
								}else{
									uni.showToast({
										icon:"none",
										title:"未知错误"
									})
								}
							},
							error:(res)=>{
								uni.showToast({
									icon:"none",
									title:"请求验证失败 , 请稍后再试"
								})
							},
							complete: () => {
								uni.hideLoading()								
							}
						})
					}else{
						uni.hideLoading()
						uni.showToast({
							icon:"none",
							title:"参数不能为空"
						})
					}
				}
				// else{
				// 	uni.showToast({
				// 		icon:"none",
				// 		title:"错误的参数"
				// 	})
				// }
			},
			changeBio(){
				if(!this.login){
					uni.showToast({
						icon:"none",
						title:"尚未登录或授权码失效"
					})
				}else{
					this.promptTitle = "修改简介"
					this.promptDefault = this.bio
					this.$refs.prompt.show()
				}								
			},
			gotoMyRepos(){
				uni.navigateTo({
					url:"./myOwnRepo"
				})
			},
			gotoMyWatch(){
				uni.navigateTo({
					url:"./myWatchRepo"
				})
			},
			gotoMyPublic(){
				uni.navigateTo({
					url:"./myPublicRepo"
				})
			},
			
			gotoFeedback() {
				
			},
			
			gotoAbout(){
				uni.navigateTo({
					url : "../common/readme?name=monkeyshuang&repo=giteethird"
				})
			},
			logout(){
				uni.showLoading({
					
				})
				uni.removeStorage({
					key: "private_token",
					success: () => {
						this.login = false
						this.avatar_url = '../../static/avatar.png'
						this.bio = ''
						this.created_at = ''
						this.public_repos = 0
						this.stared = 0
						this.watched = 0
						this.name = "点击登陆"
					},
					complete: () => {
						uni.hideLoading()
					}
				})
				
				uni.removeStorageSync("access_token")
				uni.navigateTo({
					url:"../index/login/login"
				})
				
				
			}
		}
	}
</script>

<style>
	page{ background: #F5F5F5; }
	.meMain{ width: 100%;position: relative; }
	.meMain .imageback{ width: 100%;height: 220upx;display: block; background-color: #f5f5f5;}
	.meMainBox{ width: 92%;margin: 0 auto; }
	.mePosition{ position: absolute;top: 0;left: 0;width: 100%; }
	.meHead{ overflow: hidden;position: relative; }
	.meHeadAvatar{ float: left;width: 19%;margin-top: 10upx; }
	.meHeadAvatar image{ width: 110upx;height: 110upx;display: block;border-radius: 50%; }
	.meHeadName{ float: left;width: 81%;line-height: 120upx;color: #000;font-size: 28upx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
	.description {font-size: 32rpx;padding:20rpx 20rpx 20rpx 20rpx;}
	.meOverBg{ background: #FFFFFF;overflow: hidden;border-radius: 12upx;margin-top: 30upx; }
	.meVisitor{ display: flex;flex-direction: row; }
	.meVisitorLt{ width: 50%;text-align: center;margin: 30upx 0; }
	.meVisitorLt:nth-child(1){ border-left: 1px #F5F5F5 solid;border-right: 1px #F5F5F5 solid; }
	.meVisitorTxt_01{ font-size: 28upx;color: #666666; }
	.meVisitorTxt_01 image{ width: 35upx;height: 35upx;vertical-align: middle;margin: 0 10upx 4upx 0; }
	.meVisitorTxt_02{ font-size: 30upx;color: #3B7ED5; }
	
	.meVisitorTitle{ font-size: 30upx;color: #333333;border-bottom: 1px #F5F5F5 solid;padding: 20upx 30upx; }
	.meOrderLt{ width: 50%;text-align: center;padding: 30upx 0;transition: all 0.4s; }
	.meOrderLt:active{ background: #E2E2E2; }
	.meOrderTxt_01{ color : #50B7EA;font-size: 36rpx;  }
	.meOrderTxt_01 image{ width: 40upx;height: 40upx;display: block;margin: 0 auto 6upx; }
	.meOrderTxt_02{ font-size: 24upx;color: #666666; }
	
	.businessList{ overflow: hidden;padding: 30upx;border-bottom: 1px #F5F5F5 solid;transition: all 0.4s; }
	.businessList:active{ background: #E2E2E2; }
	.businessList:last-child{ border-bottom: none; }
	.businessListTxt{ float: left;font-size: 28upx;color: #333333; }
	.businessListTxt image{ width: 35upx;height: 35upx;vertical-align: middle;margin: 0 10upx 4upx 0; }
	.businessListYou{ float: right;font-size: 28upx;color: #333333; }
	.businessListYou image{ width: 20upx;height: 20upx;vertical-align: middle;margin: 0 0 4upx 10upx; }
	
	
</style>
